<template>
  <div class="home" v-back="color">
    <button v-back="'red'" @click="cut('red')">红色</button>
    <button v-back="'green'" @click="cut('green')">绿色</button>
    <input type="text" v-focus>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from 'vue';
export default {
  name: 'Home',
  components: {

  },
  setup(props) {
    const color = ref('');
    const cut = (val) => {
      color.value = val
    }
    return {
      color,
      cut
    }
  },
  directives:{ // 是一个对象
    back:{
      updated(el,binding,vnode,preVnode){
        //  console.log(el);
        // console.log(binding);
        if (binding.value == 'red'){
          el.style.background = 'blue';
          return
        }
        el.style.background = binding.value;
      }
    }
  }
}
</script>
